<!DOCTYPE html>
<html>
<head>
    <!-- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> -->
    <link rel="shortcut icon" href="{{ url_for('static', filename = 'telecom.ico') }}" type="image/x-icon">
    <link rel="icon" href="{{ url_for('static', filename = 'telecom.ico') }}" type="image/x-icon">

    
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        /*#result{position: absolute;z-index: 2}*/
        .navbar.navbar-default{
            margin-bottom:0;
            border:none;
            background-color:#293c55;
        }
        #result{position: absolute;z-index: 2}


    </style>
    <link href="./static/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="static/css/style.css" />
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="./static/js/jquery-1.11.2.min.js"></script>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GygcEB3Vw3NOYWlHDq1KOOz2vI0C2ZCG"></script>
    <script type="text/javascript" src="./static/js/echarts.js"></script>
    <!-- // <script type="text/javascript" src="./static/echarts3/echarts.js"></script> -->
    <script src="http://gallery.echartsjs.com/dep/echarts/latest/extension/bmap.min.js"></script>

    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="static/js/index.js"></script>

    <!-- // <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script> -->

    <!--加载鼠标绘制工具-->
    <!-- // <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> -->
    <!-- <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" /> -->
  
    <title>首页</title>
</head>
<body>
    <div id="result">
        <input type="button"  onclick="openHeatmap();" value="显示热力图"/>
        <input type="button"  onclick="closeHeatmap();" value="关闭热力图"/>
        <a class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="以 xlsx 格式下载结果" href="javascript:void(0)" onclick="javascript:window.location.href='/data_save'">
            <i class="fa fa-file-excel-o"></i>&nbsp;保存
        </a>
        <!-- <input type="button" id="query_polygon" value="查询覆盖物经纬度"/> -->
    </div>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
function fix(num, length) {
  return ('' + num).length < length ? ((new Array(length + 1)).join('0') + num).slice(-length) : '' + num;
}
</script>
<script type="text/javascript">
    // 百度地图API功能
    // var map = new BMap.Map("allmap");
    // map.enableScrollWheelZoom();//开启滚动缩放
    // map.enableContinuousZoom();//开启缩放平滑
    // var pt =new BMap.Point(116.400, 39.914);
    // map.centerAndZoom('武汉市',15);  //初始化地图,设置城市和地图级别。

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('allmap'));
    app={};
    option = null;
    app.title = '热力图与百度地图扩展';
    option = {
        title:{
            text:'http浏览类业务热力展示',
            subtext: '大数据运营中心',
            left:'center'
        },
        tooltip : {
            trigger: 'item'
        },
        animation: false,
        bmap: {
            center: [113.13066322374, 30.240018034923],
            // center: '湖北',
            zoom: 8,
            roam: true,
            // mapStyle: {
            //     styleJson: [{
            //         'featureType': 'water',
            //         'elementType': 'all',
            //         'stylers': {
            //             'color': '#d1d1d1'
            //         }
            //     }, {
            //         'featureType': 'land',
            //         'elementType': 'all',
            //         'stylers': {
            //             'color': '#f3f3f3'
            //         }
            //     }, {
            //         'featureType': 'railway',
            //         'elementType': 'all',
            //         'stylers': {
            //             'visibility': 'off'
            //         }
            //     }, {
            //         'featureType': 'highway',
            //         'elementType': 'all',
            //         'stylers': {
            //             'color': '#fdfdfd'
            //         }
            //     }, {
            //         'featureType': 'highway',
            //         'elementType': 'labels',
            //         'stylers': {
            //             'visibility': 'off'
            //         }
            //     }, {
            //         'featureType': 'arterial',
            //         'elementType': 'geometry',
            //         'stylers': {
            //             'color': '#fefefe'
            //         }
            //     }, {
            //         'featureType': 'arterial',
            //         'elementType': 'geometry.fill',
            //         'stylers': {
            //             'color': '#fefefe'
            //         }
            //     }, {
            //         'featureType': 'poi',
            //         'elementType': 'all',
            //         'stylers': {
            //             'visibility': 'off'
            //         }
            //     }, {
            //         'featureType': 'green',
            //         'elementType': 'all',
            //         'stylers': {
            //             'visibility': 'off'
            //         }
            //     }, {
            //         'featureType': 'subway',
            //         'elementType': 'all',
            //         'stylers': {
            //             'visibility': 'off'
            //         }
            //     }, {
            //         'featureType': 'manmade',
            //         'elementType': 'all',
            //         'stylers': {
            //             'color': '#d1d1d1'
            //         }
            //     }, {
            //         'featureType': 'local',
            //         'elementType': 'all',
            //         'stylers': {
            //             'color': '#d1d1d1'
            //         }
            //     }, {
            //         'featureType': 'arterial',
            //         'elementType': 'labels',
            //         'stylers': {
            //             'visibility': 'off'
            //         }
            //     }, {
            //         'featureType': 'boundary',
            //         'elementType': 'all',
            //         'stylers': {
            //             'color': '#fefefe'
            //         }
            //     }, {
            //         'featureType': 'building',
            //         'elementType': 'all',
            //         'stylers': {
            //             'color': '#d1d1d1'
            //         }
            //     }, {
            //         'featureType': 'label',
            //         'elementType': 'labels.text.fill',
            //         'stylers': {
            //             'color': '#999999'
            //         }
            //     }]
            // }
        },
        visualMap: {
            //show: false,
            text: ['高','低'],
            top: 'bottom',
            min: 0,
            max: 25,
            seriesIndex: 0,
            calculable: true,
            inRange: {
                color: ['#0000FF', '#0000FF', '#008000', '#FFFF00', '#FF0000']
            }
        },
        grid: {
            height: 500,
            width: 8,
            right: 100,
            bottom: 10
        },
        xAxis: {
            type: 'category',
            data: [],
            splitNumber: 1,
            show: false
        },
        yAxis: {
            position: 'right',
            min: 0,
            max: 20,
            splitNumber: 20,
            inverse: true,
            axisLabel: {
                show: true
            },
            axisLine: {
                show: false  
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            data: []
        },
        series: [
            {
                type: 'heatmap',
                coordinateSystem: 'bmap',
                data: [],
                pointSize: 5,
                blurSize: 6
            },
            // {
            //     zlevel: 2,
            //     name: '地图指示',
            //     type: 'bar',
            //     barWidth: 5,
            //     itemStyle: {
            //         normal: {
            //             color: undefined,
            //             shadowColor: 'rgba(0, 0, 0, 0.1)',
            //             shadowBlur: 10
            //         }
            //     },
            //     data: [20]
            // }
        ]
    }

    /**
     * 根据值获取线性渐变颜色
     * @param  {String} start 起始颜色
     * @param  {String} end   结束颜色
     * @param  {Number} max   最多分成多少分
     * @param  {Number} val   渐变取值
     * @return {String}       颜色
     */
    function getGradientColor (start, end, max, val) {
        var rgb = /#((?:[0-9]|[a-fA-F]){2})((?:[0-9]|[a-fA-F]){2})((?:[0-9]|[a-fA-F]){2})/;
        var sM = start.match(rgb);
        var eM = end.match(rgb);
        var err = '';
        max = max || 1
        val = val || 0
        if (sM === null) {
            err = 'start';
        }
        if (eM === null) {
            err = 'end';
        }
        // console.log(start,end)
        // console.log(sM,eM)
        if (err.length > 0) {
            throw new Error('Invalid ' + err + ' color format, required hex color');    
        }
        var sR = parseInt(sM[1], 16),
            sG = parseInt(sM[2], 16),
            sB = parseInt(sM[3], 16);
        var eR = parseInt(eM[1], 16),
            eG = parseInt(eM[2], 16),
            eB = parseInt(eM[3], 16);
        var p = val / max;
        var gR = fix(Math.round(sR + (eR - sR) * p).toString(16),2),
            gG = fix(Math.round(sG + (eG - sG) * p).toString(16),2),
            gB = fix(Math.round(sB + (eB - sB) * p).toString(16),2);
            console.log(sR,sG,sB,eR,eG,eB)
        return '#' + gR + gG + gB;
    }



    // myChart.setOption(option);
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
    if (!app.inNode) {
        // 添加百度地图插件
        var bmap = myChart.getModel().getComponent('bmap').getBMap();
        bmap.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));
        // bmap.setMapStyle({
        //     style: 'midnight'
        // });
        // var size = new BMap.Size(150, 8);
        // bmap.addControl(new BMap.CityListControl({
        //     anchor: BMAP_ANCHOR_TOP_RIGHT,
        //     offset: size,
        // }));
    }
    $.getJSON('/get_data', function (data) {
        // console.log(data)

        var points = [].concat(data.map(function (track) {
            return [track.lng,track.lat,track.count]
        }));
        // console.log(points)
        option.series[0].data=points
        myChart.setOption(option);
        // var marker = new BMap.Marker(new BMap.Point(113.18556, 30.66659),{title:'测试点1'});
        // bmap.addControl(marker)

        // if (!app.inNode) {
        //     // 添加百度地图插件
        //     var bmap = myChart.getModel().getComponent('bmap').getBMap();
        //     bmap.addControl(new BMap.MapTypeControl());
        // }
        var option1 = myChart.getOption()
        console.log(option1)
        // getTOP(option1)
    });
    

    function getTOP(opt) {
        opt.series[1]={
            zlevel: 2,
            name: '地图指示',
            type: 'bar',
            barWidth: 5,
            itemStyle: {
                normal: {
                    color: undefined,
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            data: [20]
        }
        var TOPN = 20
        // var option = myChart.getOption()
        // 修改top
        // console.log(option)
        opt.grid[0].height = TOPN * 20
        opt.yAxis[0].max = TOPN
        opt.yAxis[0].splitNumber = TOPN
        opt.series[1].data[0] = TOPN
        // 排序
        var data = opt.series[0].data.sort(function(a, b) {
            return b[2] - a[2]
        })
        // var data = option.series[0].data.sort(function(a, b) {
        //     return b.value - a.value
        // })
        console.log(data)
        
        var maxValue = data[0].value,
            minValue = data.length > TOPN ? data[TOPN - 1].value : data[data.length - 1].value
        
        var s = opt.visualMap[0].inRange.color[0],
            e = opt.visualMap[0].inRange.color.slice(-1)[0]
            console.log(maxValue,minValue)
        var sColor = getGradientColor(s, e, maxValue, minValue)
        var eColor = getGradientColor(s, e, maxValue, maxValue)
        // console.log(sColor)
        
        opt.series[1].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 1,
            color: '#FF9966'
        }, {
            offset: 0,
            color: 'red'
        }])
        
        // yAxis
        var newYAxisArr = []
        echarts.util.each(data, function(item, i) {
            if (i >= TOPN) {
                return false
            }
            var c = getGradientColor(sColor, eColor, maxValue, item.value)
            newYAxisArr.push({
                value: item[2],
                textStyle: {
                    color: c
                }
            })
        })
        opt.yAxis[0].data = newYAxisArr
        opt.yAxis[0].axisLabel.formatter = (function(data) {
            return function(value, i) {
                if (!value) return ''
                return value + ' ' + data[i].value
            }
        })(data)
        opt.series[2]={
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: data.slice(0,10),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: 'purple',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
        console.log(opt)
        myChart.setOption(opt)
    }


    // if (option && typeof option === "object") {
    //     myChart.setOption(option, true);
    // }

    function openHeatmap(){
        myChart.setOption(option, true);
    }

    function closeHeatmap(){
        myChart.clear();
    }
</script>

<script type="text/javascript">
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

<!-- /*<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('allmap'));
    app={};
    option = null;
    app.title = '热力图与百度地图扩展';

    $.getJSON('/get_data', function (data) {
        console.log(data)

        var points = [].concat(data.map(function (track) {
            return [track.lng,track.lat,track.count]
        }));
        console.log(points)
        myChart.setOption(option = {
            title:{
                text:'大数据',
                subtext: '纯属虚构',
                left:'center'
            },
            animation: false,
            bmap: {
                center: [113.13066322374, 30.240018034923],
                // center: '湖北',
                zoom: 8,
                roam: true
            },
            visualMap: {
                //show: false,
                text: ['高','低'],
                top: 'bottom',
                min: 0,
                max: 5,
                seriesIndex: 0,
                calculable: true,
                inRange: {
                    color: ['blue', 'blue', 'green', 'yellow', 'red']
                }
            },
            series: [{
                type: 'heatmap',
                coordinateSystem: 'bmap',
                data: points,
                pointSize: 5,
                blurSize: 6
            }]
        });
        if (!app.inNode) {
            // 添加百度地图插件
            var bmap = myChart.getModel().getComponent('bmap').getBMap();
            bmap.addControl(new BMap.MapTypeControl());
        }
    });

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

    function openHeatmap(){
        myChart.setOption(option, true);
    }

    function closeHeatmap(){
        myChart.clear();
    }
</script>*/ -->


